$(function() {
    var id = location.search.split('=')[1]; // 从地址栏获得ID

    $.ajax({
        type: "get",
        url: "../php/getitem.php",
        data: {
            "id": id
        },
        dataType: "json",
        success: function(res) {
            // console.log(res);
            var bgimg='';
            var template='';
            var pic='';
            var cor='';
            var price='';
            var car='';
            var pic = JSON.parse(res.pic);
            // console.log(pic[1].src);
            cor =`
                 <a href="">
                 <span style="background-image:url(${pic[2].src});"></span>
                    <em>白色</em>
                </a> 
            `;
            // console.log(pic[2].src);
            bgimg =`
                <ul>
                    <li style="background-image:url(${pic[0].src});"></li>
                    <li style="background-image:url(${pic[0].src});background-position: 0 -70px;"></li>
                </ul>
            `;
            template = `
                <h2 title="T恤 张广先 福到 白色">${res.title}</h2>
                <ul>
                    <li><a href="">产品描述</a>|</li>
                    
                    <li><a href="">评论</a>|</li>
                    
                    <li><a href="">提问</a></li>
                </ul>  
            `;
            pic =
                `
                <div class="img-box">
                    <div class="fdj"></div>
                    <img src="${pic[1].src}" alt="" class="smallpic">
                </div>
                <div class="big">
                        <img src="${pic[1].src}" alt="" class="bigpic">
                </div>
    
                `;
           

            price =`
                <span>特惠价:</span>
                ￥<span class="pri-num">${res.price}</span>
                <a href="">充100返100，点击充值</a>
            `;
            car =`
                <p>已选:</p>
                <i id="sel-c">白色</i>
                <em>XS</em>
                <b id="sel-n">${res.car}</b>
            `;

            $('.title').append(template);
            $('.img-left').append(bgimg);
            $('.img-right').append(pic);
            $('.price').append(price);
            $('.wh').append(cor);
            $('.xuanz').append(car);
            
            $('.add').on('click', function() {
                additem(res.id, res.price,$('#num').val());
                location.reload;
            });
        }
    });

    function additem(id, price, num) {
        var shop = cookie.get('shop'); //获取cookie
        var product = {
            "id": id,
            "price": price,
            "num": num
        };

        if (shop) {
            shop = JSON.parse(shop);
            // console.log(shop);

            if (shop.some(elm => elm.id == id)) {
                shop.forEach((elm, i) => {
                    elm.id == id ? elm.num = num : null;
                });
            } else {
                shop.push(product);
            }
            cookie.set('shop', JSON.stringify(shop), 1);
        } else {
            shop = [];
            shop.push(product);
            cookie.set('shop', JSON.stringify(shop), 1);
        }

        
    }
    
    
 });